<template>
  <el-row>
    <el-col :span="5" style="margin-left: 10px">
      <el-form-item label="妊检日期：">
        <el-date-picker v-model="form.dateofConversion" type="daterange" range-separator="—" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :size="size" @change="hhhh"/>
      </el-form-item>
    </el-col>
    <el-col :span="5" style="margin-left: 10px">
      <el-form-item label="种母耳号：">
        <el-select v-model="form.basicInforId" placeholder="请选择" clearable>
          <el-option v-for="basic in basicInforList.filter((x:any)=>x.gender==2&&x.pigTypeId==2)" :key="basic.basicInforId" :label="basic.earNumber" :value="basic.basicInforId" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="5" style="margin-left: 10px">
      <el-form-item label="负责人:">
        <el-select v-model="form.principal" placeholder="请选择" clearable>
          <el-option v-for="user in userList" :key="user.userId" :label="user.userMyName" :value="user.userMyName" />
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="5" style="margin-left: 10px">
      <el-form-item label="妊检结果：">
        <el-select v-model="form.pregnancyTestResultId" placeholder="请选择" clearable>
          <el-option v-for="pregnancyresult in pregnancyResultList" :key="pregnancyresult.pregnancyTestResultId" :label="pregnancyresult.pregnancyTestResultName" :value="pregnancyresult.pregnancyTestResultId" />
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="5" style="margin-left: 10px">
      <el-form-item label="同胎数：">
        <el-select v-model="form.parityNumber" placeholder="请选择" clearable>
          <el-option label="未知" :value="0" />
          <el-option label="1" :value="1" />
          <el-option label="2" :value="2" />
          <el-option label="3" :value="3" />
          <el-option label="4" :value="4" />
          <el-option label="5" :value="5" />
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="15" style="text-align: right">
      <el-button type="danger" @click="handlePrenatalCheckup()">查询</el-button>
      <el-button>重置</el-button>
    </el-col>
  </el-row>
  <hr size="6" style="background-color: rgb(232.8, 233.4, 234.6)" />
  <el-row style="margin-top: 10px">
    <el-col>
      <el-button type="danger" :icon="Plus" @click="router.push('/AddBreedingSows')">新增</el-button>
      <el-button type="danger" :icon="Delete" @click="batchDel()">删除</el-button>
    </el-col>
  </el-row>
  <!-- <hr size="3" style="background-color: red;margin-bottom: 10px;margin-top: 10px;"/> -->
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%;margin-top: 10px;" @selection-change="handleSelectionChange" class="show">
    <el-table-column type="selection" width="55" />
    <el-table-column property="prenatalCheckupId" label="序号" />
    <el-table-column property="pregnancyTestDate" label="妊检日期" width="100">
      <template #default="scope">
        <el-text v-if="scope.row.pregnancyTestDate==null">{{ scope.row.pregnancyTestDate }}</el-text>
        <el-text v-else>{{ scope.row.pregnancyTestDate.substr(0,10) }}</el-text>
      </template>
    </el-table-column>
    <el-table-column property="earNumber" label="耳号" />
    <el-table-column property="pregnancyTestResultName" label="妊检结果" />
    <el-table-column property="pregnancyTestTypeName" label="妊检方式" />
    <el-table-column property="parityNumber" label="同胎数" />
    <el-table-column property="" label="妊检天数">
      <template #default="scope">
        <el-text v-if="scope.row.pregnancyTestResultName=='怀孕'">{{ Math.ceil((new Date()-new Date(scope.row.pregnancyTestDate))/ (1000 * 3600 * 24)) }}</el-text>
        <el-text v-else>0</el-text>
      </template>
    </el-table-column>
    <el-table-column property="currentBuilding" label="当前栋舍" />
    <el-table-column property="currentfield" label="当前栏位" />
    <el-table-column property="bedroomName" label="转入栋舍" />
    <el-table-column property="fieldName" label="转入栏位" />
    <el-table-column property="principal" label="负责人" />
    <el-table-column property="createdOwner" label="创建人" />
    <el-table-column property="createdTime" label="创建时间" width="170">
      <template #default="scope">
        <el-text v-if="scope.row.createdTime==null">{{ scope.row.createdTime }}</el-text>
        <el-text v-else>{{ scope.row.createdTime.replace('T',' ').substr(0,19) }}</el-text>
      </template>
    </el-table-column>
    <el-table-column property="updateOwner" label="修改人" />
    <el-table-column property="updateTime" label="修改时间" width="170">
      <template #default="scope">
        <el-text v-if="scope.row.updateTime==null">{{ scope.row.updateTime }}</el-text>
        <el-text v-else>{{ scope.row.updateTime.replace('T',' ').substr(0,19) }}</el-text>
      </template>
    </el-table-column>
    <el-table-column property="examineOwner" label="审核人" />
    <el-table-column property="examineTime" label="审核时间" width="170">
      <template #default="scope">
        <el-text v-if="scope.row.examineTime==null">{{ scope.row.examineTime }}</el-text>
        <el-text v-else>{{ scope.row.examineTime.replace('T',' ').substr(0,19) }}</el-text>
      </template>
    </el-table-column>
    <el-table-column property="documentNumber" label="单据号" width="170" />
    <el-table-column label="操作" min-width="150" fixed="right">
      <template #default="scope">
        <el-button type="primary" link>审核</el-button>
        <el-button type="primary" link @click="singleUpd(scope.row)">编辑</el-button>
        <el-button type="primary" link @click="singleDel(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

    <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
        layout="total, slot, prev, pager, next"
        :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        ,每页显示{{ form.pageSize }}条,当前第{{ form.pageIndex }}/{{ form.pageCount }}页
        <el-button class="btn-prev" @click="handleCurrentChange(1)" :disabled="form.pageIndex==1">首页</el-button>
        </el-pagination>
      </td>

      <td>
        <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize"
        :page-sizes="[3, 5, 8, 10]" :background="true" prev-text="上一页" next-text="下一页"
        layout=" slot, sizes, jumper"
        :total="form.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange">
        <el-button class="btn-prev" @click="handleCurrentChange(form.pageCount)" :disabled="form.pageIndex==form.pageCount">尾页</el-button>
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

  <script setup lang="ts">
import { Delete, Plus } from "@element-plus/icons-vue";
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox, TableInstance } from "element-plus";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

//创建路由实例
const router = useRouter();
const route = useRoute();

const size = ref<"default" | "large" | "small">("default");

const form = reactive({
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
  basicInforId: '',
  startTime: null,
  endTime: null,
  principal: "",
  pregnancyTestResultId: '',
  parityNumber: '',
  //获取日期
  dateofConversion:''
});

const hhhh = () => {
  console.log(form.dateofConversion);
  console.log(form.dateofConversion[0]);
  console.log(form.dateofConversion[1]);
};

//多选
const multipleTableRef = ref<TableInstance>();
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  console.log('多选',val)
  multipleSelection.value = val;
};

//获取妊检列表
const tableData=ref([])
const handlePrenatalCheckup=()=>{
  axios.post(apiBedinUrl+'/api/PrenatalCheckup/SearchPrenatalCheckup',{
    pageIndex: form.pageIndex,
    pageSize: form.pageSize,
    basicInforId: form.basicInforId||0,
    startTime: form.dateofConversion[0]||null,
    endTime: form.dateofConversion[1]||null,
    principal: form.principal,
    pregnancyTestResultId: form.pregnancyTestResultId||0,
    parityNumber: form.parityNumber||-1
  }).then(res=>{
    console.log(res.data.data)
    if(res.data.data!=null){
      tableData.value=res.data.data.list;
      form.totalCount=res.data.data.totalCount;
      form.pageCount=res.data.data.pageCount;
    }else{
      tableData.value=[]
    }
  })
}

//分页
const handleSizeChange = (val: number) => {
  form.pageSize=val
  handlePrenatalCheckup()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex=val
  handlePrenatalCheckup()
}

//单删
const singleDel=(row:any)=>{
  const id=row.prenatalCheckupId;
  delPrenatalCheckup([id])
}

//修改
const singleUpd=(row:any)=>{
  console.log(row)
  router.push({
    name:"DetailPrenatalCheckup",
    query:{
      obj:row.prenatalCheckupId
    }
  })
}

//批量删除
const batchDel=()=>{
  if(multipleSelection.value.length==0){
    ElMessage.error("至少选择一项");
    return
  }
  //调用删除方法
  const id=multipleSelection.value.map((x:any)=>x.prenatalCheckupId)
  delPrenatalCheckup(id)
}

//删除
const delPrenatalCheckup=(id:any)=>{
  console.log('删除',id)
  ElMessageBox.confirm(
    '您确定要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.put(apiBedinUrl+'/api/PrenatalCheckup/DeltedPrenatalCheckup',{
        prenatalCheckupId:id
      })
      .then(res=>{
        console.log(res.data)
        if(res.data.code==0){
          ElMessage.success("删除成功");
          //刷新页面
          handlePrenatalCheckup();
        }else{
          ElMessage.error("删除失败");
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'error',
        message: '取消删除',
      })
    })
}

//--------------下拉框---------------//

//获取负责人
const userList=ref([])
const handleprincipal=()=>{
    axios.post(apiUrl+'/api/Users/GetUsers',{
        pageIndex:1,
        pageSize:1000,
    })
    .then(res=>{
        userList.value=res.data.data.list
    })
}

//获取耳号
const basicInforList: any = ref([])
const handlebasicInfor = () => {
    axios.post(apiBedinUrl+'/api/Basics/SearchBasic', {})
    .then(res => {
        basicInforList.value = res.data.data
    })
}

//获取妊检结果
const pregnancyResultList:any=ref([])
const handlePregnancyResult=()=>{
    axios.get(apiBedinUrl+'/api/PrenatalCheckup/SearchPregnancyResult',{})
    .then(res=>{
        pregnancyResultList.value=res.data.data
    })
}

//创建生命周期函数钩
onMounted(() => {
  handleprincipal();//负责人
  handlebasicInfor();//耳号
  handlePregnancyResult();//妊检结果
  handlePrenatalCheckup();//获取妊检列表
});
</script>

<style>
.show {
  border-collapse: collapse;
  border-top: 2px solid red; /* 设置上边框为红色 */
}
</style>
